<!DOCTYPE html>
<html>
<head>
  <title>Popcorn Media Spawner Plug-in Demo</title>
  <script src="../../popcorn.js"></script>
  <script src="../../modules/player/popcorn.player.js"></script>
  <script src="../../players/youtube/popcorn.youtube.js"></script>
  <script src="../../players/vimeo/popcorn.vimeo.js"></script>
  <script src="../../players/soundcloud/popcorn.soundcloud.js"></script>
  <script src="popcorn.mediaspawner.js"></script>
  <script>
    document.addEventListener( "DOMContentLoaded", function () {
      var p = Popcorn( "#video" )
      .mediaspawner({
        source: "http://www.youtube.com/watch?v=CXDstfD9eJ0",
        target: "mediaspawnerdiv",
        start: 3,
        end: 10,
        caption: "This is a test. We are assuming control. We are assuming control.<br/>",
        autoplay: true,
        width: 900,
        height: 504
      })
      .mediaspawner({
        source: [
          "../../test/trailer.ogv",
          "../../test/trailer.mp4"
        ],
        target: "mediaspawnerdiv",
        start: 11,
        end: 20,
        caption: "This is a test. We are assuming control. We are assuming control.<br/>",
        autoplay: true,
        width: 400
      })
      .mediaspawner({
        source: [
          "../../test/italia.ogg",
          "../../test/italia.mp4"
        ],
        target: "mediaspawnerdiv",
        start: 21,
        end: 30,
        caption: "This is a test. We are assuming control. We are assuming control.<br/>",
        autoplay: true,
        width: 400
      })
      .volume( 0 )
      .play();
    }, false );
  </script>
</head>
<body>
<h1 id="qunit-header">Popcorn Media Spawner Plug-in Demo</h1>
  <p>All types of media spawner media types are shown below the video. This includes youtube, HTML5 Video and Audio.</p>

  <div>
    <video id="video"
      controls
      width= "350px"
      poster="../../test/poster.png">

      <source id="mp4"
        src="../../test/trailer.mp4"
        type="video/mp4;" codecs="avc1, mp4a" >

      <source id="ogv"
        src="../../test/trailer.ogv"
        type="video/ogg;" codecs="theora, vorbis">

      <p>Your user agent does not support the HTML5 Video element.</p>

    </video>
  </div>
  <div>
    <div id="mediaspawnerdiv"></div>
  </div>
</body>
</html>

